<script setup lang="ts">
import { ref, defineOptions } from 'vue'

defineEmits(['changeBackColor','jianFont','addFont'])
</script>
<template>
    <div id="settingBox">
        <div class="setFont">
            <div class="left">字号</div>
            <div class="right">
                <div class="jian" @click="$emit('jianFont')">A-</div>
                <div class="add" @click="$emit('addFont')">A+</div>
            </div>
        </div>
        <div class="setColor">
            <div class="left">颜色</div>
            <div class="right">
                <div @click="$emit('changeBackColor', 'eaeaea')" class="eaeaea"></div>
                <div @click="$emit('changeBackColor', 'd7c3b8')" class="d7c3b8"></div>
                <div @click="$emit('changeBackColor', 'd8ddea')" class="d8ddea"></div>
                <div @click="$emit('changeBackColor', 'f2e4cb')" class="f2e4cb"></div>
                <div @click="$emit('changeBackColor', 'black')" class="black"></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
#settingBox {
    background-color: black;
    color: white;
    padding: 1vw 2vw;
    font-size: .875rem;

    .setFont,
    .setColor {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2vw 0;

        .right {
            width: 70%;
            margin-right: 10vw;
        }
    }

    .setColor {

        .right {
            display: flex;
            justify-content: space-between;
            padding: 2vw 0;

            div {
                width: 1.875rem;
                height: 1.875rem;
                border-radius: 50%;
            }

            .eaeaea {
                background-color: #eaeaea;
            }

            .d7c3b8 {
                background-color: #d7c3b8;
            }

            .d8ddea {
                background-color: #d8ddea;
            }

            .f2e4cb {
                background-color: #f2e4cb;
            }

            .black {
                background-color: #2d2a28;
            }
        }
    }

    .setFont {
        .right {
            display: flex;
            justify-content: space-between;

            div {
                width: 40%;
                text-align: center;
                padding: 6px 0;
                color: white;
                border: 1px solid white;
                box-sizing: border-box;
                border-radius: 20px;

            }
        }
    }
}
</style>